<template>
  <div class="xianluguanli">
    <!-- //搜索框 -->
    <div class="sousuokuang">
      <div class="chaxunk">
        <!-- 搜索表单 -->
        <el-form ref="form" :model="form" label-width="120px" :inline="true">

          <el-form-item label="线路编号:" style="width: 33%; margin-left: -10px; " prop="number">
            <el-input v-model="form.number" placeholder="请输入线路编号" style="width: 290px;  " clearable />
          </el-form-item>

          <el-form-item label="线路名称:" style="width: 33%; margin-left: -10px;" prop="name">
            <el-input v-model="form.name" placeholder="请输入线路名称" style="width: 290px;" clearable />
          </el-form-item>

          <el-form-item label="所属营业部:" style="width: 33%; margin-left: -10px;" prop="startOrganId">
            <treeselect v-model="form.startOrganId" placeholder="请选择其实机构" style="width: 290px;" :normalizer="normalizer" :options="options" />
          </el-form-item>

          <el-form-item label="所属营业部:" style="width: 33%; height: 38px; margin-left: -10px;" prop="endOrganId">
            <treeselect v-model="form.endOrganId" style="width: 290px; " placeholder="请选择终点机构" :normalizer="normalizer" :options="options" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 90px; margin-left: 30px;" @click="status=1, getluxian(form)">搜索</el-button>
            <el-button style="width: 90px;" @click="chongzhi">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 图标 -->
    <div style="width: 1350px;  background-color: white; padding: 28px; margin-top: 20px;">

      <p style="margin: 0; padding-left: 0; margin-bottom: 10px;">
        <el-button type="primary" style="width: 90px; width: 98px;" @click="xianlu=true">新增线路</el-button>
        <el-button type="primary" style="width: 90px; margin-left: 15px; width: 98px;" @click=" getmoney(),addmoney=true">成本设置</el-button>
      </p>
      <!-- 下边的展示图表 -->
      <template>
        <el-table
          v-loading="loading"
          stripe
          :data="tableData"
          style="width: 100%;"
        >

          <!-- 车辆信息 -->
          <el-table-column
            width="50px"
            prop="number"
            type="expand"
            @cell-click="handleCellClick"
          >
            <!-- v-slot="{row}" -->
            <template>
              <el-table
                style="width: 100%"
                height="250"
              >

                <el-table-column

                  prop="date"
                  label="车次名称"
                  width="200"
                >
                  <el-table-column
                    prop="name"
                    label="发车频次"
                    width="200"
                  />
                  <el-table-column
                    prop="province"
                    label="到达时间"
                    width="200"
                  />
                  <el-table-column
                    prop="city"
                    label="车辆安排"
                    width="200"
                  />
                  <el-table-column
                    prop="address"
                    label="司机安排"
                    width="200"
                  />
                  <el-table-column
                    prop="zip"
                    label="操作"
                    width="300"
                  />
                </el-table-column></el-table>
            </template>
          </el-table-column>

          <!-- 1111//11111 -->
          <el-table-column
            width="190px"
            prop="number"
            label="线路编号"
            highlight-current-row="true"
          />
          <el-table-column
            prop="id"
            label="线路名称"
            width="190px"
          />
          <el-table-column
            prop="type"
            label="线路类型"
            width="190px"
          >
            <template v-slot="{row}">
              <span v-if="row.type===1">干线</span>
              <span v-if="row.type===2">支线</span>
              <span v-if="row.type===3">接驳路线</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="startOrganName"
            label="起始地机构"
            width="100px"
          />
          <el-table-column
            prop="endOrganName"
            label="目的地机构"
            width="100px"
          />
          <el-table-column
            prop="distance"
            label="距离(km)"
            width="100px"
          />
          <el-table-column
            prop="cost"
            label="成本(元)"
            width="110px"
          />
          <el-table-column
            prop="time"
            label="预计时间(分钟)"
            width="120px"
          />
          <!-- 下边图标的操作功能 -->
          <el-table-column
            label="操作"
            width="130px"
          >
            <template v-slot="{row}">
              <el-row type="flex" justify="center" class="footer">
                <el-button type="text" style="color: #419eff;" @click="getxianluid1(row)">修改</el-button>
                <el-popconfirm title="确定要删除吗？" @confirm="delxianlu(row.id)">
                  <el-button slot="reference" style="margin-left: 10px;" type="text">删除</el-button>
                </el-popconfirm>
                <el-button type="text" style="color: #419eff; margin-left: 5px;">增加车次</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页数据 -->
      <el-row type="flex" justify="center" class="footer" style="margin-top: 6px;">
        <div class="block">
          <el-pagination
            :current-page="pageData.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageData.pageSize"
            layout="total,sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </el-row>
      <!-- 成本路线 -->
      <el-dialog title="成本设置" :visible.sync="addmoney" width="600px">
        <el-form ref="moneyform" :model="moneyform" :rules="rules" label-width="120px" style="padding-right: 50px;">
          <el-form-item label="线路类型">
            <span>每公里平均成本</span>
          </el-form-item>
          <el-form-item label="干线" prop="one">
            <el-input v-model="moneyform.one" autocomplete="off" />
          </el-form-item>
          <el-form-item label="支线" prop="two">
            <el-input v-model="moneyform.two" autocomplete="off" />
          </el-form-item>
          <el-form-item label="接驳" prop="three">
            <el-input v-model="moneyform.three" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center; margin-top: -40px;">
          <el-button @click="addmoney=false">取 消</el-button>
          <el-button type="primary" @click="addlxmoney">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 增加线路 -->
      <el-dialog title="增加线路" :visible.sync="xianlu" width="600px">
        <el-form ref="xianluform" :model="xianluform" :rules="rules" label-width="120px" style="padding-right: 50px;">

          <el-form-item label="线路编号" prop="number">
            <el-input v-model="xianluform.number" autocomplete="off" />
          </el-form-item>
          <el-form-item label="线路名称" prop="name">
            <el-input v-model="xianluform.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="线路类型" prop="type">
            <el-select v-model="xianluform.type" placeholder="请选择支线" style="width: 390px;">
              <el-option label="支线" value="1" />
              <el-option label="干线" value="2" />
              <el-option label="接驳路线" value="3" />
            </el-select>
          </el-form-item>

          <el-form-item label="起始地机构" prop="startOrganId">
            <treeselect v-model="xianluform.startOrganId" placeholder="请选择其实机构" style="width: 290px;" :normalizer="normalizer" :options="options" />
          </el-form-item>
          <el-form-item label="目的地机构" prop="endOrganId">
            <treeselect v-model="xianluform.endOrganId" placeholder="请选择其实机构" style="width: 290px;" :normalizer="normalizer" :options="options" />
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center; margin-top: -40px;">
          <el-button @click="xianlu=false">取 消</el-button>
          <el-button type="primary" @click="addxianlu">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改线路 -->
      <el-dialog title="修改路线" :visible.sync="changelx" width="600px">
        <el-form ref="changeform" :model="changeform" :rules="rules" label-width="120px" style="padding-right: 50px;">

          <el-form-item label="线路编号" prop="number">
            <el-input v-model="changeform.number" autocomplete="off" />
          </el-form-item>
          <el-form-item label="线路名称" prop="name">
            <el-input v-model="changeform.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="线路类型" prop="type">
            <el-select v-model="changeform.type" placeholder="请选择起始点" style="width: 390px;" :disabled="true" />
          </el-form-item>
          <el-form-item label="起始地机构" prop="startOrganName">
            <!-- <el-input v-model="xianluform.endOrganName" autocomplete="off" /> -->
            <el-select v-model="changeform.startOrganName" placeholder="请选择起始点" style="width: 390px;" :disabled="true" />
          </el-form-item>
          <el-form-item label="目的地机构" prop="endOrganName">
            <!-- <el-input v-model="xianluform.endOrganName" autocomplete="off" /> -->
            <el-select v-model="changeform.endOrganName" placeholder="请选择目的地" style="width: 390px;" :disabled="true" />
          </el-form-item>
          <el-form-item label="距离(千米)" prop="distance">
            <el-input v-model="changeform.distance" autocomplete="off" />
          </el-form-item>
          <el-form-item label="成本(元)" prop="cost">
            <el-input v-model="changeform.cost" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center; margin-top: -40px;">
          <el-button @click="changelx=false">取 消</el-button>
          <el-button type="primary" @click="chgangeluxian">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { transListToTreeData } from '@/utils/index'
import { getDepartTree, getluxianApi, addmoneyApi, getmoneyApi, addxianluApi, delxianluApi, getxianluidApi, changexianluidApi } from '@/api/base'
// import { number } from 'echarts'
export default {
  components: { Treeselect },
  data() {
    return {
      status: null,
      luxianid: null,
      changeform: {},
      changelx: false,
      xianlu: false,
      // 增加线路表单
      xianluform: {
        number: 'XL565656',
        name: 'ly',
        type: null,
        startOrganId: null,
        endOrganId: null
      },
      total: 0, // 总共多少条数据
      pageData: {
        Page: 1, // 当前页
        pageSize: 5 // 每页多少条数据
      },
      addmoney: false,
      // 成本表单
      moneyform: {
        one: null,
        two: null,
        three: null
      },
      rules: {
        one: [
          { required: true, message: '干线成本不能为空', trigger: 'blur' },
          { pattern: /^\d+(\.\d{1,2})?$/, message: '数字,且只能两位小数', trigger: 'blur' }
          // { min: 1, max: 6, message: '', trigger: 'blur' }
        ],
        two: [
          { required: true, message: '支线成本不能为空', trigger: 'blur' },
          // { min: 1, max: 10, message: '', trigger: 'blur' },
          { pattern: /^\d+(\.\d{1,2})?$/, message: '数字,且只能两位小数', trigger: 'blur' }
        ],
        three: [
          { required: true, message: '接驳路线不能为空', trigger: 'blur' },
          // { max: 15, message: '', trigger: 'blur' },
          { pattern: /^\d+(\.\d{1,2})?$/, message: '数字,且只能两位小数', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '线路编码不能为空', trigger: 'blur' },
          { max: 8, message: '编号最大为8位', trigger: 'blur' },
          { pattern: /^XL\d{6}$/, message: '前两位为XL,后六位数字', trigger: 'blur' }

        ],
        name: [
          { required: true, message: '线路名称不能为空', trigger: 'blur' },
          { max: 15, message: '名称最大为15位', trigger: 'blur' }

        ],
        type: [
          { required: true, message: '线路类型不能为空', trigger: 'blur' }

        ],
        startOrganName: [
          { required: true, message: '起始机构不能为空', trigger: 'blur' }

        ],
        endOrganName: [
          { required: true, message: '目的地机构不能为空', trigger: 'blur' }

        ],

        cost: [
          { required: true, message: '不能为空', trigger: 'blur' },
          // { max: 15, message: '最大为15位数', trigger: 'blur' },
          { pattern: /^\d+(\.\d{1,2})?$/, message: '必须输入数字', trigger: 'blur' }
        ],
        distance: [
          { required: true, message: '不能为空', trigger: 'blur' },
          // { max: 15, message: '最大为15位数', trigger: 'blur' },
          { pattern: /^\d+(\.\d{1,2})?$/, message: '必须输入数字', trigger: 'blur' }
        ]
      },
      loading: false,
      options: [], // 机构总数据
      tableData: [],
      normalizer(node) { // 机构的选项配置
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      // 搜索表单
      form: {
        name: '', // 线路编号
        number: ``, // 线路编号
        startOrganId: null,
        // 起始点机构
        endOrganId: null// 重点机构id
      }
    }
  },
  created() {
    this.getTransportFist()
    this.getluxian()
    this.getmoney()
    // this.getcar()
  },

  methods: {
    // 获取机构详情
    async getTransportFist() {
      const res = JSON.parse(await getDepartTree())
      this.options = transListToTreeData(res, `0`)
      // console.log(this.options)
    },
    // 重置表单
    chongzhi() {
      // 重置表单
      this.$refs.form.resetFields()

      this.getluxian()
      // this.options = []
      // this.getTransportFist()
    },
    // 获取所有分页路线
    async  getluxian(val) {
      this.loading = true
      if (this.status === 1) {
        // 获取搜索的路线
        console.log(1)
        const res = await getluxianApi({ ...this.pageData, ...this.form })
        this.total = +(res.counts)
        this.tableData = res.items
        // this.pageData.page = 1
        // console.log(this.tableData)
      } else {
        // 获取所有的路线数据
        const res = await getluxianApi({ ...this.pageData, ...val })
        this.total = +(res.counts)
        this.tableData = res.items
        console.log(this.tableData)
      }
      this.loading = false
    },
    // 第几页
    handleCurrentChange(page) {
      this.pageData.page = page
      this.getluxian()
    },
    // 一页多少条数据
    handleSizeChange(val) {
      this.pageData.pageSize = val
      this.getluxian()
    },
    // 根据id获取路线
    // async getluxianId() {
    //   this.loading = true
    //   console.log(this.form.name)
    //   const res = await getluxianApi(this.form)
    //   console.log(res)

    //   this.total = +(res.pages)
    //   this.tableData = res.items
    //   this.page = res.page
    //   this.loading = false
    // },

    // 成本配置
    async addlxmoney() {
      try {
        await this.$refs.moneyform.validate()
        addmoneyApi([{ cost: +(this.moneyform.one), transportLineType: 1 }, { cost: +(this.moneyform.two), transportLineType: 2 }, { cost: +(this.moneyform.three), transportLineType: 3 }])
      } catch (error) {
        console.log(error)
      }

      this.$message.success(`成本配置成功`)
      this.addmoney = false
    },
    // 获取成本配置
    async getmoney(val) {
      const res = await getmoneyApi()
      // console.log(res)
      this.moneyform.one = res[0].cost
      this.moneyform.two = res[1].cost
      this.moneyform.three = res[2].cost
    },
    // 增加线路
    async addxianlu() {
      this.xianluform.type = +(this.xianluform.type)
      await addxianluApi(this.xianluform)
      this.$message.success(`新增路线成功`)
      // console.log(1)
      this.xianlu = false
      this.getluxian()
    },
    // 删除路线
    async delxianlu(id) {
      const id1 = id
      console.log(id1)
      await delxianluApi(id)
      this.$message.success(`删除路线成功`)
      // await getluxianApi(id)
    },
    // id获取路线详情
    async getxianluid1(row) {
      console.log(row)
      this.luxianid = +(row.id)
      const res = await getxianluidApi(+(row.id))
      this.changeform = res
      this.changelx = true
      console.log(res)
      console.log(this.changeform)
    },
    // 修改路线.
    async  chgangeluxian() {
      console.log(this.changeform)
      console.log(this.luxianid)
      await changexianluidApi(`XL565601`)
      // , { ...this.changeform }
      this.$message.success(`修改路线成功`)
    },
    // 查询车次信息
    // getcarid(row) {
    //   console.log(111)
    //   console.log(row)
    //   // const res=await getcaridApi()
    // },
    // async getcar(v) {
    //   const res = await getcarApi()
    //   console.log(res)
    //   console.log(v)
    // },
    handleCellClick(row, column, event) {
      if (column.property === 'number') {
        // 获取点击的第一个列的属性信息
        console.log(column)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.xianluguanli{  margin-top: 46px;
 padding: 23px 20px 20px 20px;
 .sousuokuang{
  width: 1350px;
  height: 140px;
  background-color: white;
  padding: 20px 20px 20px 0px;
.chaxunk{
  padding-left: 12px;
  font-weight: 400;
}
.label{
  font-weight: 400;
}
.el-form-item__label{
  font-weight: 400;
}
.el-form-item__label {
    font-weight: 400;
    color: #20232a;}
    .el-dialog__header{

      background-color: #f3f4f7;
    border-radius: 8px 8px 0 0;
    z-index: 1111;

    }
}
 }
 .el-table th.is-center {
    text-align: center;
}

</style>
